<template>
  <!-- 上栏 -->
  <div>
    <div>
      <el-container class="home-cont">
        <el-header class="home-header">
          <span class="home-title">奥凯航空后勤资产管理系统</span>
          <div style="display: flex; align-items: center; margin-right: 7px">
            <el-badge style="margin-right: 30px"> </el-badge>
            <el-dropdown @command="handCommand">
              <span style="display: flex; align-items: center"
                >{{ user.name }}
              </span>
              <i><img v-if="user.userface != ''" :src="user.userface" /></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click="($event) => goTo('/user/user')">
                  <i class="el-icon-s-management"></i>个人信息
                </el-dropdown-item>
                <el-dropdown-item>设置</el-dropdown-item>
                <el-dropdown-item command="logout" divided
                  >注销</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <!-- //侧边栏 -->
        <el-container>
          <el-aside>
            <div
              style="
                display: flex;
                justify-content: flex-start;
                width: 100%;
                text-align: left;
              "
            >
              <el-menu style="background-color: #ececec; width: 200px">
                <el-menu-item index="1-1" @click="($event) => goTo('/home')">
                  <span>主页</span>
                </el-menu-item>

                <el-submenu index="3-1">
                  <template slot="title">
                    <i class="el-icon-user"></i>基础信息管理
                  </template>
                  <el-menu-item
                    index="3-1-1"
                    @click="($event) => goTo('/emp/UserList')"
                  >
                    <i class="el-icon-user-solid"></i>数据字典管理
                  </el-menu-item>
                  <el-menu-item
                    index="3-1-2"
                    @click="($event) => goTo('/emp/lingshi')"
                  >
                    <i class="el-icon-user-solid"></i>资产分类管理
                  </el-menu-item>
                  <el-menu-item
                    index="3-1-3"
                    @click="($event) => goTo('/emp/zhiyuan')"
                  >
                    <i class="el-icon-user-solid"></i>公司职员管理
                  </el-menu-item>
                  <el-menu-item
                    index="3-1-4"
                    @click="($event) => goTo('/emp/yonghu')"
                  >
                    <i class="el-icon-user-solid"></i>系统用户管理
                  </el-menu-item>
                </el-submenu>
                <el-submenu index="4-1">
                  <template slot="title">
                    <i class="el-icon-s-order"></i>资产信息管理
                  </template>
                  <el-menu-item
                    index="4-1-1"
                    @click="($event) => goTo('/system/nomalAssets')"
                  >
                    <i class="el-icon-s-management"></i>普通资产信息
                  </el-menu-item>
                  <el-menu-item
                    index="4-1-2"
                    @click="($event) => goTo('/system/fianceAssets')"
                  >
                    <i class="el-icon-s-release"></i>金融资产信息
                  </el-menu-item>
                  <el-menu-item
                    index="4-1-3"
                    @click="($event) => goTo('/system/carAssets')"
                  >
                    <i class="el-icon-s-release"></i>车辆资产信息
                  </el-menu-item>
                  <el-menu-item
                    index="4-1-4"
                    @click="($event) => goTo('/system/permanentAssets')"
                  >
                    <i class="el-icon-s-release"></i>不动产信息
                  </el-menu-item>
                </el-submenu>
                <el-submenu index="5-1">
                  <template slot="title">
                    <i class="el-icon-s-order"></i>资产信息管理
                  </template>
                  <el-menu-item
                    index="5-1-1"
                    @click="($event) => goTo('/flow/nomalFlow')"
                  >
                    <i class="el-icon-s-management"></i>普通资产流转
                  </el-menu-item>
                  <el-menu-item
                    index="5-1-2"
                    @click="($event) => goTo('/flow/fianceFlow')"
                  >
                    <i class="el-icon-s-release"></i>金融资产流转
                  </el-menu-item>
                  <el-menu-item
                    index="5-1-3"
                    @click="($event) => goTo('/flow/carFlow')"
                  >
                    <i class="el-icon-s-release"></i>车辆资产流转
                  </el-menu-item>
                  <el-menu-item
                    index="5-1-4"
                    @click="($event) => goTo('/flow/permanentAsset')"
                  >
                    <i class="el-icon-s-release"></i>不动产资产
                  </el-menu-item>
                </el-submenu>
              </el-menu>
            </div>
          </el-aside>
          <el-main>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/home' }"
                >主页</el-breadcrumb-item
              >
              <!-- <el-breadcrumb-item
                v-text="this.$router.currentRoute.name"
              ></el-breadcrumb-item> -->
            </el-breadcrumb>
            <keep-alive>
              <router-view v-if="this.$route.meta.keepAlive"></router-view>
            </keep-alive>
            <router-view v-if="!this.$route.meta.keepAlive"></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      user: {
        name: "登陆者姓名",
        userface: "",
      },
      router: [],
    };
  },
  methods: {
    handCommand() {
      console.log("选择的数据为：");
    },
    goTo(urlpath) {
      this.$router.replace(urlpath);
    },
  },
  computed: {
    routes() {
      return "";
    },
  },
};
</script>
<style >
.home-cont {
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}

.home-header {
  background-color: #23262e;
  color: #333;
  text-align: content;
  display: flex;
  align-items: content;
  justify-content: space-between;
  box-sizing: content-box;
  padding: 0px;
}

.home-title {
  color: #272525;
  font-size: 22px;
  display: inline;
  margin-left: 5px;
  color: #009688;
}
</style>